<template>
  <div class="login">
    <template v-if="isLoaded">
      <van-form @submit="onLogin">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" color="#ff6a6c" native-type="submit">登录</van-button>
        </div>
        <span class="register"  @click="isLoaded = false">还没有账号？立即注册</span>
      </van-form>
    </template>
    <template v-else>
      <van-form validate-first @submit="onSubmit">
        <van-field
          v-model="username"
          name="username"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="mobile"
          name="mobile"
          label="手机号"
          placeholder="请输入手机号"
          :rules="[
            { required: true, message: '请输入手机号' },
           
          ]"
        />
        <van-field v-model="code" name="code" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <template #button>
            <van-button size="small" type="primary">发送验证码</van-button>
          </template>
        </van-field>
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" color="#ff6a6c" native-type="submit">注册</van-button>
        </div>
        <span class="register"  @click="isLoaded = true">已有账号,立即登录</span>
      </van-form>
    </template>
  </div>
</template>

<script>
import { Form, Field, Button, Toast } from "vant";
import API from "@/utils/api.js";
export default {
  name: "Login",
  data() {
    return {
      //注册手机号
      mobile: "",
      //注册密码
      password: "",
      //登录用户名
      username: "",
      //验证码
      code: "",
      //显示登录
      isLoaded: true
    };
  },
  components: {
    [Form.name]: Form,
    [Field.name]: Field,
    [Button.name]: Button,
    [Toast.name]: Toast
  },
  methods: {
    //注册
    onSubmit(values) {
      console.log(values);
      this.$post(API.POST_REGISTER, {
        username: values.username,
        password: values.password,
        mobile: values.mobile,
        code: values.code
      }).then(res => {
        // console.log('注册',res);
        this.isLoaded = true;
        // 返回错误码不为0 登录失败
        if (res.errno != 0) {
          this.username = "";
          this.password = "";
        } else {
          // 注册成功 保存信息并跳转回登录页面
          this.setStorage(res.data);
          const userInfo = {
            nickName: res.data.userInfo.nickName,
            avatarUrl: res.data.userInfo.avatarUrl,
            token: res.data.token
          };
          this.$store.dispatch("login", userInfo);
          Toast.success('注册成功，快登录');
        }
      });
    },
    onFailed(errorInfo) {
      console.log("failed", errorInfo);
    },
    //登录
    onLogin(values) {
      this.$post(API.POST_AUTH_LOGIN, {
        username: values.username,
        password: values.password
      }).then(res => {
        console.log(res);
        // 返回错误码不为0 登录失败
        if (res.errno != 0) {
          this.username = "";
          this.password = "";
        } else {
          // 登录成功 保存信息并跳转回个人信息页面
          this.setStorage(res.data);
          const userInfo = {
            nickName: res.data.userInfo.nickname,
            avatarUrl: res.data.userInfo.avatar,
            token: res.data.token
          };
          this.$store.dispatch("login", userInfo);
          this.$router.push({
            path: "my"
          });
          Toast.success('登录成功');
        }
      });
    },
    // 因为方法传值两个这里只有一个data接收就只能获取到上面的字符串 登录成功
    setStorage(data) {
      localStorage.setItem("token", data.token);
      localStorage.setItem("userInfo", JSON.stringify(data.userInfo));
    }
  }
};
</script>

<style lang="less" scoped>
.login {
  margin-top: 46px;
  .register {
    margin-left: 30px;
  }
}
</style>